<template>
  <div>
    <!--顶部模板设置-->
    <div class="routineSetting animate__animated animate__fadeInDown">
      <span class="settingFont">提示模版设置</span>
      <span class="zhujie">注:验证码模板中{1}:为应用信息,{2}:为验证码信息
        任务模板:{1}:为应用信息,{2}:为任务名称,{3}:为任务开始事件 </span>

      <el-form ref="form"
               :inline="true"
               class="templateEmail"
               label-width="120px">
      <el-form-item label="邮箱验证码模板" class="codeTemplate">
        <el-input type="textarea" :rows="8"
                  clearable
                  maxlength="120"
                  show-word-limit
                  :disabled="isTemplate"
                  v-model="$store.state.emailTemplate.codeTemplate" style="width: 400px"></el-input>
      </el-form-item>
      <el-form-item label="邮箱任务模板"  class="testTemplate">
        <el-input type="textarea" :rows="8"
                  clearable
                  maxlength="120"
                  show-word-limit
                  :disabled="isTemplate"
                  v-model="$store.state.emailTemplate.testTemplate" style="width: 400px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="buttonTStyle" v-if="isTemplate" @click="isTemplate=!isTemplate">开始修改</el-button>
        <el-button class="buttonTStyle" v-else @click="updTemplate">确定修改</el-button>
      </el-form-item>
      </el-form>
    </div>

    <div class="bottomSetting">
      <!--侧边栏设置-->
      <div class="asideSetting animate__animated animate__fadeInDown">
        <span class="settingFont">侧边栏设置</span>
        <el-form ref="form"
                 label-width="80px">
          <el-col :span="11">
            <el-form-item label="标题1">
              <el-input v-model="elMenuTitle1.title" :disabled="isSetting"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="标题图标"
                          class="iconText">
              <el-select
                  :disabled="isSetting"
                  style="width: 140px"
                  v-model="elMenuTitle1.iconClass"
                  placeholder="图标">
                <el-option
                    v-for="(item,index) in icons"
                    :value="item">
                  <i :class="item" style="font-size: 20px"></i>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="标题2">
              <el-input v-model="elMenuTitle2.title" :disabled="isSetting"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="标题图标"
                          class="iconText">
              <el-select
                  :disabled="isSetting"
                  style="width: 140px"
                  v-model="elMenuTitle2.iconClass"
                  placeholder="图标">
                <el-option
                    v-for="(item,index) in icons"
                    :value="item">
                  <i :class="item" style="font-size: 20px"></i>
                </el-option>
              </el-select>
            </el-form-item >
          </el-col>
          <el-col :span="11">
            <el-form-item label="标题3">
              <el-input v-model="elMenuTitle3.title" :disabled="isSetting"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="标题图标"
                          class="iconText">
              <el-select
                  :disabled="isSetting"
                  style="width: 140px"
                  v-model="elMenuTitle3.iconClass"
                  placeholder="图标">
                <el-option
                    v-for="(item,index) in icons"
                    :value="item">
                  <i :class="item" style="font-size: 20px"></i>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="标题4">
              <el-input v-model="elMenuTitle5.title" :disabled="isSetting"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="标题图标"
                          class="iconText">
              <el-select
                  :disabled="isSetting"
                  style="width: 140px"
                  v-model="elMenuTitle5.iconClass"
                  placeholder="图标">
                <el-option
                    v-for="(item,index) in icons"
                    :value="item">
                  <i :class="item" style="font-size: 20px"></i>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="19">
            <el-form-item>
              <el-button class="buttonStyle" v-if="isSetting" @click="isSetting=!isSetting">开始修改</el-button>
              <el-button class="buttonStyle" v-else @click="updElMenu">确定修改</el-button>
            </el-form-item>
          </el-col>


        </el-form>
      </div>
      <!--开关设置-->
      <div class="switchSetting animate__animated animate__fadeInDown">
        <span class="settingFont">开关设置</span>
        <el-form ref="form"
                 :inline="true"
                 label-width="120px">
          <el-col :span="11">
            <el-form-item label="菜单1">
              <el-switch
                  v-model="elMenuTitle1.isDisable"
                  active-text="开启"
                  inactive-text="关闭"
                  :disabled="isSetting"
                  :active-value="1"
                  :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="菜单2">
              <el-switch
                  v-model="elMenuTitle2.isDisable"
                  active-text="开启"
                  :disabled="isSetting"
                  :active-value="1"
                  :inactive-value="0"
                  inactive-text="关闭">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="菜单3">
              <el-switch
                  v-model="elMenuTitle3.isDisable"
                  active-text="开启"
                  :disabled="isSetting"
                  :active-value="1"
                  :inactive-value="0"
                  inactive-text="关闭">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="菜单4">
              <el-switch
                  v-model="elMenuTitle5.isDisable"
                  active-text="开启"
                  :disabled="isSetting"
                  :active-value="1"
                  :inactive-value="0"
                  inactive-text="关闭">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <hr/>
          </el-col>
          <el-col :span="11">
            <el-form-item label="邮箱推送">
              <el-switch
                  v-model="$store.state.noteList.openSendEmail"
                  active-text="开启"
                  :disabled="isSwitch"
                  inactive-text="关闭">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="短信推送">
              <el-switch
                  v-model="$store.state.noteList.openSendTel"
                  active-text="开启"
                  :disabled="isSwitch"
                  inactive-text="关闭">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="用户修改信息">
              <el-switch
                  v-model="$store.state.noteList.openUpdateUser"
                  active-text="开启"
                  :disabled="isSwitch"
                  inactive-text="关闭">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="用户手机绑定">
              <el-switch
                  v-model="$store.state.noteList.openUseTel"
                  active-text="开启"
                  :disabled="isSwitch"
                  inactive-text="关闭">
              </el-switch>
            </el-form-item>
          </el-col>
          <center>
            <el-form-item>
              <el-button class="buttonStyle" v-if="isSwitch" @click="isSwitch=!isSwitch">开始修改</el-button>
              <el-button class="buttonStyle" v-else @click="updateBaseContext">确定修改</el-button>
            </el-form-item>
          </center>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {Form, Input, FormItem, ColorPicker, Select} from 'element-ui';

export default {
  name: "userSetting",
  components: {
    Form,
    Input,
    FormItem,
    ColorPicker,
    Select
  },
  data() {
    return {
      icons: ['el-icon-platform-eleme', 'el-icon-eleme', 'el-icon-delete-solid', 'el-icon-delete',
        'el-icon-s-tools', 'el-icon-setting', 'el-icon-user-solid', 'el-icon-user', 'el-icon-phone',
        'el-icon-phone-outline', 'el-icon-more', 'el-icon-more-outline', 'el-icon-star-on', 'el-icon-star-off',
        'el-icon-warning', 'el-icon-warning-outline', 'el-icon-remove', 'el-icon-circle-plus', 'el-icon-success',
        'el-icon-error', 'el-icon-zoom-in', 'el-icon-zoom-out', 'el-icon-remove-outline', 'el-icon-circle-plus-outline',
        'el-icon-circle-check', 'el-icon-circle-close', 'el-icon-minus', 'el-icon-plus', 'el-icon-check', 'el-icon-close',
        'el-icon-upload', 'el-icon-upload2', 'el-icon-download', 'el-icon-camera', 'el-icon-bell', 'el-icon-s-operation',
        'el-icon-s-order', 'el-icon-s-marketing', 'el-icon-s-claim', 'el-icon-s-custom', 'el-icon-s-grid', 'el-icon-menu',
        'el-icon-share', 'el-icon-bottom-left', 'el-icon-bottom-right', 'el-icon-back', 'el-icon-right', 'el-icon-bottom',
        'el-icon-top', 'el-icon-top-left', 'el-icon-top-right', 'el-icon-arrow-left', 'el-icon-arrow-right',
        'el-icon-arrow-down', 'el-icon-arrow-up', 'el-icon-date', 'el-icon-chat-dot-round'],
      isSetting: true, //是否开启修改
      isSwitch: true, //是否开启开关修改
      isTemplate: true, //是否开启模板修改
      isElUpd: true, //是否修改成功
      elMenuTitle1: {},
      elMenuTitle2: {},
      elMenuTitle3: {},
      elMenuTitle5: {},
    }
  },
  methods: {
    //修改基本信息
    updateBaseContext() {
      let updateBaseData = this.$qs.stringify(this.$store.state.noteList);
      this.$axios({
        url: '/noteList/setAppBaseContext',
        method: 'POST',
        data: updateBaseData
      }).then( response =>{
        console.log(response.data);
        this.$message.success("修改成功")
        this.isSwitch = !this.isSwitch
      }).catch( error =>{
        console.log(error);
      })
    },
    //修改模板信息
    updTemplate(){
      let updData = this.$qs.stringify(this.$store.state.emailTemplate)
      this.$axios({
        url: '/noteList/setEmailTemplate',
        method: 'PUT',
        data: updData
      }).then( response =>{
        if (response.data.noteCode === 200){
          this.$message.success(response.data.noteMessage);
          this.$store.commit("setEmailTemplate",response.data.noteClass)
          this.$message.success("修改成功")
          this.isTemplate=!this.isTemplate //关闭修改
        }else{
          this.$message.error("请求超时....")
        }
      }).catch( error=>{
        this.$message.error("请求超时....")
      })
    },
    //修改菜单信息
    updElMenu(){
      let elMenuList = [this.elMenuTitle1,this.elMenuTitle2,this.elMenuTitle3,this.elMenuTitle5]
      // console.log(elMenuList);
      for (let index=0;index<elMenuList.length;index++){
        let putData = this.$qs.stringify(elMenuList[index]);
        this.$axios({
          url: '/noteList/updElMenu',
          method: 'PUT',
          data: putData
        }).then( response =>{
          console.log(response.data);
        }).catch( error =>{
          this.isElUpd = false;
          this.$message.error("请求超时...")
        })
      }
      if (this.isElUpd){
        this.$message.success("修改成功")
        this.isSetting = true;
      }

    }
  },
  mounted() {
    this.elMenuTitle1 = this.$store.state.elMenuTitle1
    this.elMenuTitle2 = this.$store.state.elMenuTitle2
    this.elMenuTitle3 = this.$store.state.elMenuTitle3
    this.elMenuTitle5 = this.$store.state.elMenuTitle5
  }
}
</script>

<style scoped>
.routineSetting {
  width: 94%;
  height: 400px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  float: left;
  border-radius: 30px;
}

.bottomSetting {
  width: 94%;
  /*height: 370px;*/
  /*background-color: #ffffff;*/
  float: left;
  margin-top: 20px;
}

.asideSetting, .switchSetting {
  width: 48%;
  height: 100%;
  float: left;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 30px;
}

.switchSetting {
  float: right;
}

.buttonStyle {
  width: 370px;
}

.buttonTStyle {
  width: 370px;
  margin-left: 39%;
}

.settingFont {
  font-size: 20px;
  color: #606266;
  display: block;
  margin-top: 2%;
  text-indent: 33px;
  margin-bottom: 2%;
}

.zhujie {
  display: block;
  float: left;
  font-size: 15px;
  color: #cccccc;
  margin-left: 3%;
  margin-top: -2%;
}
/*邮箱模板*/
.templateEmail{
  width: 100%;
  height: 81%;
  /*background: #ffcdd2;*/
  border-radius: 30px;
}
/*邮件验证码颜色*/
.codeTemplate,.testTemplate{
  width: 46%;
  height: 60%;
  border-radius: 30px;
  margin-left: 2%;
  margin-top: 2%;
  float: left;
}
.iconText{
  float: right;
}
</style>
